<template>
  <div class="uni-time">
    {{ datetimeStr }}
  </div>
</template>

<script>
  import moment from 'moment';
  export default {
    name: "DateTime",
    props: {
      format: {
        type: String,
        default: "HH:mm:ss" // date / time
      }
    },
    data() {
      return {
        datetimeStr: '',
        timer: null
      }
    },
    mounted() {
      this.timer = setInterval(() => {
        this.datetimeStr = moment().format(this.format)
      }, 500)
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    }
  }
</script>

<style scoped="scoped">
  .uni-time {
    font-size: 28px;
    line-height: 50px;
    color: #33ddee;
    text-align: left;
    font-weight: bold;
  }
</style>
